<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

    <script>
        $(function () {
            let
                canvas = $('#draw').get(0),
                ctx = canvas.getContext('2d'),
                $predict = $('#predict'),
                $info = $('#info'),
                $result = $('#result'),
                $prob = $('#prob'),
                painting = false;

            function resetCanvas() {
                ctx.fillStyle = "black";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                $('#info').hide();
            }

            function startPosition(e) {
                painting = true;
                draw(e);
            }

            function endPosition() {
                painting = false;
                ctx.beginPath();
            }

            function draw(e) {
                if (!painting) {
                    return;
                }
                ctx.lineWidth = 24;
                ctx.lineCap = 'round';
                ctx.strokeStyle = 'white';

                ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
            }

            canvas.addEventListener('mousedown', startPosition);
            canvas.addEventListener('mouseup', endPosition);
            canvas.addEventListener('mousemove', draw);

            resetCanvas();
            $('#reset').click(resetCanvas);

            $predict.click(function () {
                $predict.attr('disabled', 'disabled');
                let resized = document.createElement('canvas');
                resized.width = 28;
                resized.height = 28;
                resized.getContext('2d').drawImage(canvas, 0, 0, resized.width, resized.height);
                let
                    data = resized.toDataURL('image/png'),
                    pos = data.indexOf('base64,'),
                    b64data = data.substring(pos + 7);
                console.log('image data:\n' + b64data);
                $.ajax({
                    url: '/api',
                    type: 'POST',
                    contentType: 'application/json',
                    dataType: 'json',
                    data: JSON.stringify({
                        image: b64data
                    })
                }).done(function (r) {
                    console.log('result:\n' + JSON.stringify(r));
                    $('#result').text(r.result);
                    $('#probability').text((r.probability * 100).toFixed(2) + '%');
                    $('#info').show();
                }).fail(function () {
                    console.error('error');
                }).always(function () {
                    $predict.removeAttr('disabled');
                });
            });
        });
    </script>
</head>

<body>
    <div class="container">
        <div class="row m-4">
            <div class="col-12">
                <canvas id="draw" width="256" height="256" style="border: 0 solid #000;"></canvas>
            </div>
        </div>
        <div class="row m-4">
            <div class="col-12">
                <button id="predict" type="button" class="btn btn-primary">Predict</button>
                <button id="reset" type="button" class="btn btn-secondary">Reset</button>
            </div>
        </div>
        <div id="info" class="row m-4" style="display:none;">
            <div class="col-12">
                <p class="fs-4 text-secondary">The result is
                    <span id="result" class="fs-1 fw-bold text-primary">7</span>
                    , with a
                    <span id="probability" class="fs-4 text-primary">99%</span>
                    probability.
                </p>
            </div>
        </div>
    </div>

</body>

</html>